<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			margin: 0;
		}
		#smallBox{
			width: 512px;
			height: 327px;
			position: relative;
			border:1px solid;
		}
		#bigBox{
			width: 400px;
			height: 400px;
			position: relative;
			overflow: hidden;
			border:1px solid;

		}
		.floatBox{
			background: rgba(0,0,0,0.3);
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		#floatBox1{
			width: 200px;
			height: 200px;
			

		}
		#floatBox2{
			width: 480px;
			height: 360px;
			
		}

		#bigBox img{
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
<div id="zoom">
	<div id="smallBox">
		<div class="floatBox" id="floatBox1"></div>
		<img src="img/small.jpg" alt="">
	</div>
	<div id="bigBox">
		<!-- <div class="floatBox" id="floatBox2"></div> -->
		<img src="img/big.jpg" alt="">
	</div>
</div>
	
	<script>
		
	(function(){
		var smallBox = document.getElementById('smallBox');
		var bigBox = document.getElementById('bigBox');
		var floatBox1 = document.getElementById('floatBox1');
		// var floatBox2 = document.getElementById('floatBox2');
		var bigImg = bigBox.getElementsByTagName('img')[0];
		smallBox.onmouseenter = function(){
			floatBox1.style.display = "block";
			// floatBox2.style.display = "block";
		}
		smallBox.onmouseleave = function(){
			floatBox1.style.display = "none";
			// floatBox2.style.display = "none";
		}
		smallBox.onmousemove = function(event){
			var e = event||window.event;
			var left = e.clientX - smallBox.offsetLeft - floatBox1.offsetWidth/2;
			var top = e.clientY - smallBox.offsetTop -floatBox1.offsetHeight/2;
			// console.log(window.top);
			if(left<0){
				left = 0;
			}else if(left>smallBox.offsetWidth-floatBox1.offsetWidth){
				left = smallBox.offsetWidth-floatBox1.offsetWidth
			}
			if(top<0){
				top = 0;
			}else if(top>smallBox.offsetHeight-floatBox1.offsetHeight){
				top = smallBox.offsetHeight-floatBox1.offsetHeight;
			}
			floatBox1.style.left = left +"px";
			floatBox1.style.top = top + "px";


			// floatBox2.style.left = left/smallBox.offsetWidth*bigBox.offsetWidth +　"px";
			bigImg.style.left = -left/smallBox.offsetWidth*bigImg.offsetWidth +　"px";
			bigImg.style.top = -top/smallBox.offsetHeight*bigImg.offsetHeight + "px";
		}
	}())
	</script>
</body>
</html>